<template>
	<view class="c-page" :class="ggclass" :style=[styles]>
		<c-loading-page v-if="pagesStatus==0" :value="pagesStatus==0"></c-loading-page>
		<slot v-else-if="pagesStatus==1" v-bind="list"></slot>
		<view class="empty-wrap" v-if="pagesStatus==2">
			<image :src="emptySrc |imgFilter" mode="widthFix"></image>
			<view>{{ emptyText }}</view>
		</view>
		<c-pull-up-loading :type="pullType"></c-pull-up-loading>
	</view>
</template>

<script>
	export default {
		props: {
			emptyText: {
				// 说明文字
				type: String,
				default: '这里空空如也...'
			},
			ggclass: {
				type: String,
				default: ''
			},
			emptySrc: {
				// 图片地址
				type: String,
				default: '/static/img/empty.png'
			},
			width: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: ''
			},
			minHeight: {
				type: String,
				default: ''
			},
			minWidth: {
				type: String,
				default: ''
			},
			api: {
				type: String,
				default: ''
			},
			params: {
				type: Object,
				default: () => {
					return {}
				}
			},
			pageSize: {
				type: [String, Number],
				default: 10
			},
			padding: {
				type: String,
				default: ''
			}
		},
		data() {
			let queryParams = {
				pageIndex: 1,
				pageSize: this.pageSize
			}
			return {
				//将公共数据提取到这里
				result: {},
				list: [],
				queryParams,
				num: 0,
				totalCount: 999,
				mixinApi: '',
				paramss: {},
				pullType: 0,
				pagesStatus: 1
			}
		},
		computed: {
			styles() {
				let params = {
					width: this.$rpxunit(this.width),
					height: this.$rpxunit(this.height),
					minWidth: this.$rpxunit(this.minWidth),
					minHeight: this.$rpxunit(this.minHeight),
					padding: this.padding.split(' ').map(v => this.$rpxunit(v)).join(' ')
				}
				return params
			}
		},
		created() {
			if (this.api) {
				this.init(this.api, {
					...this.params
				})
			}
		},
		methods: {
			async init(api, params) {
				let apis = api
				// this.pagesStatus = 0
				if (typeof api !== 'string' || !api) {
					apis = this.mixinApi
				}
				if (typeof api === 'object') {
					params = api
				}
				this.num = 0
				this.totalCount = 999
				this.queryParams.pageIndex = this.num + 1
				let res = await this.getList(apis, params)
				if (this.list.length) {
					this.pagesStatus = 1
				} else {
					this.pagesStatus = 2
				}
				return res
			},
			async getList(api, params) {
				this.pullType = 1
				this.queryParams.pageIndex = this.num + 1
				this.mixinApi = api || this.mixinApi
				this.paramss = Object.assign(this.queryParams, this.params, params)
				let {
					result
				} = await this.$http.get(this.mixinApi, this.paramss, false)
				this.pullType = 0
				this.result = result || {}
				if (this.num) {
					this.list.push(...this.result.items)
				} else {
					this.list = this.result.items || []
				}
				this.totalCount = this.result.totalCount
				if (!this.totalCount) this.pagesStatus = 2
			},
			reachBottom() {
				this.num++
				this.queryParams.pageIndex = this.num + 1
				if (!this.list) return
				if (this.list.length >= this.totalCount) return this.pullType = 2
				this.getList(this.api, this.paramss)
			},
			async pullDownRefresh(api, params = {}) {
				await this.init(api, params)
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		},


	}
</script>

<style lang="scss" scoped>
	.c-page {
		width: 100%;
		height: 100%;
		flex: 1;
		position: relative;
	}

	.empty-wrap {
		width: 100%;
		padding-top: 120rpx;
		box-sizing: border-box;

		image {
			width: 350rpx;
			height: 290rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		view {
			text-align: center;
			font-size: 26rpx;
			letter-spacing: 1rpx;
			color: #a1adbd;
			margin-top: 5rpx;
		}
	}
</style>